import { Skeleton, SkeletonPanel, SkeletonRows } from "@/components/ui";

export default function Loading() {
  return (
    <>
      <div className="mb-3 flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <Skeleton className="h-4 w-20" />
            <Skeleton className="h-3 w-24" />
            <Skeleton className="h-4 w-16" />
            <Skeleton className="h-3 w-32" />
          </div>
          <Skeleton className="h-6 w-56" />
        </div>
        <div className="flex gap-2">
          <Skeleton className="h-7 w-20" />
          <Skeleton className="h-7 w-24" />
        </div>
      </div>
      <div className="mb-3 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line bg-line sm:grid-cols-3 xl:grid-cols-6">
        {Array.from({ length: 6 }, (_, i) => (
          <div key={i} className="flex flex-col gap-1.5 bg-panel px-3 py-2">
            <Skeleton className="h-2.5 w-16" />
            <Skeleton className="h-5 w-12" />
            <Skeleton className="h-2.5 w-24" />
          </div>
        ))}
      </div>
      <div className="panel mb-3 flex flex-wrap items-center gap-4 px-3 py-2">
        <Skeleton className="h-2.5 w-24" />
        <div className="flex flex-wrap gap-[3px]">
          {Array.from({ length: 35 }, (_, i) => (
            <Skeleton key={i} className="size-3 !rounded-[2px]" />
          ))}
        </div>
      </div>
      <div className="mb-3 flex gap-4 border-b border-line pb-2">
        {Array.from({ length: 7 }, (_, i) => (
          <Skeleton key={i} className="h-3 w-14" />
        ))}
      </div>
      <div className="grid gap-4 xl:grid-cols-[1fr_340px]">
        <div className="panel">
          <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-28" /></div>
          <SkeletonRows rows={10} />
        </div>
        <aside className="flex flex-col gap-4">
          <SkeletonPanel lines={6} />
          <SkeletonPanel lines={3} />
          <SkeletonPanel lines={4} />
        </aside>
      </div>
    </>
  );
}